<script lang="ts">
import { defineComponent, ref } from 'vue'
import NavButton from '../components/NavButton.vue'
import { getNewonline, getHomeGoodsOne, getHomeGoodsTwo } from '../api/home'
import { onMounted, onUnmounted } from 'vue'
import router from '@/router'
export default defineComponent({
  components: {
    NavButton
  },
  setup() {
    // 最新上线接口
    var newList: any = ref<Array<any>>([])

    const getNewonlineFun: () => void = (): void => {
      getNewonline().then((data: any) => {
        // console.log(data)
        newList.value = data.data.list
      })
    }

    const loading = ref(true)
    const finished = ref(false)

    // 商品展示1接口

    var goodsOneList: any = ref<Array<any>>([])

    const getHomeGoodsOneFun: () => void = (): void => {
      getHomeGoodsOne().then((data: any) => {
        console.log(data)
        goodsOneList.value = data.data.list
        loading.value = false
      })
    }

    // 商品展示2接口

    var goodsTwoList: any = ref<Array<any>>([])

    const getHomeGoodsTwoFun: () => void = (): void => {
      getHomeGoodsTwo().then((data: any) => {
        // console.log(data)
        goodsTwoList.value = data.data.list
      })
    }

    // 定义一个定时器
    const timer = ref()

    const onLoad = () => {
      timer.value = setTimeout(() => {
        getHomeGoodsTwoFun()
        loading.value = true
        if (goodsTwoList.value) {
          finished.value = true
        }
      }, 1500)
    }

    const goSearch = (path: any) => {
      router.push({
        path
      })
    }

    // 返回顶部按钮

    const backTopFlag = ref(false) //用来判断样式
    const backTop = () => {
      let top = document.documentElement.scrollTop //获取点击时页面的滚动条纵坐标位置
      const timeTop = setInterval(() => {
        document.documentElement.scrollTop = top -= 50 //一次减50往上滑动
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 5) //定时调用函数使其更顺滑
    }
    const handleScroll = () => {
      if (document.documentElement.scrollTop > 20) {
        backTopFlag.value = true
      } else {
        backTopFlag.value = false
      }
      //往下滑超过20则显示 否则则不显示按钮
    }

    const detailHander = (path: any, goods_id: any) => {
      router.push({
        path,
        query: {
          goods_id
        }
      })
    }

    const goSub = (id: any) => {
      if (id == 1) {
        router.push({
          path: '/villa'
        })
      }
      if (id == 2) {
        router.push({
          path: '/yuan'
        })
      }
    }

    const goCreat = () => {
      router.push({
        path: '/wound'
      })
    }

    onMounted(() => {
      getNewonlineFun()
      getHomeGoodsOneFun()
      window.addEventListener('scroll', handleScroll) //监听滚动事件
    })

    onUnmounted(() => {
      clearTimeout(timer.value)
      timer.value = ''
      window.removeEventListener('scroll', handleScroll) //离开页面时移除监听事件
    })

    return {
      newList,
      goodsOneList,
      onLoad,
      loading,
      finished,
      goodsTwoList,
      backTopFlag,
      backTop,
      goSearch,
      detailHander, // 跳转详情页
      goSub, // 跳转分页
      goCreat // 跳转创作
    }
  }
})
</script>

<template>
  <!-- 搜索轮播模块 -->
  <div class="header">
    <!-- 搜索框 -->
    <div :class="['search_box', backTopFlag ? 'con' : '']">
      <div :class="['search', backTopFlag ? 'con_ser' : '']" @click="goSearch('/search')">
        <i class="iconfont icon-sousuoxiao"></i><span>惬意时光</span>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="focus">
      <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
        <van-swipe-item>
          <img src="../../src/assets/img01/focus01.webp" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../src/assets/img01/focus02.webp" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>

  <!-- 导航模块 -->
  <div class="nav">
    <img src="../../src/assets/img01/home02.webp" alt="" />
    <!-- 创作 -->
    <div class="create" @click="goCreat"></div>
    <!-- 分区 -->
    <div class="subarea">
      <div class="sub_item" v-for="num in 6" :key="num" @click="goSub(num)"></div>
    </div>
  </div>

  <!-- 最新上线 -->
  <div class="new">
    <div class="new_top"><img src="../../src/assets/img01/home03.webp" alt="" /></div>
    <div class="new_con">
      <div
        class="new_item"
        v-for="item in newList"
        :key="item.goods_id"
        @click="detailHander('/detail', item.goods_id)"
      >
        <img :src="item.cover_url" alt="" referrerpolicy="no-referrer" v-lazy="item.cover_url" />
        <p class="one-txt-cut">{{ item.name }}</p>
        <div class="price">
          <i>￥</i><span>{{ item.price / 100 }}</span
          ><span class="zero">.00</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 商品展示1 -->
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div class="shop_show">
      <div
        class="shop_item"
        v-for="item in goodsOneList"
        :key="item.goods_id"
        @click="detailHander('/detail', item.goods_id)"
      >
        <img :src="item.cover_url" alt="" referrerpolicy="no-referrer" v-lazy="item.cover_url" />
        <div class="shop_dec txt-cut">
          <!-- recommend -->
          <img :src="item.tag == 1 ? '../../src/assets/img01/new.png' : ''" alt="" />{{ item.name }}
        </div>
        <div class="price">
          <i>￥</i><span>{{ item.price / 100 }}</span
          ><span class="zero">.00</span>
        </div>
      </div>
    </div>

    <!-- 商品展示2 -->
    <div class="shop_show">
      <div
        class="shop_item"
        v-for="item in goodsTwoList"
        :key="item.goods_id"
        @click="detailHander('/detail', item.goods_id)"
      >
        <img :src="item.cover_url" alt="" referrerpolicy="no-referrer" v-lazy="item.cover_url" />
        <div class="shop_dec txt-cut">
          <img src="../../src/assets/img01/new.png" alt="" />{{ item.name }}
        </div>
        <div class="price">
          <i>￥</i><span>{{ item.price / 100 }}</span
          ><span class="zero">.00</span>
        </div>
      </div>
    </div>
  </van-list>

  <!-- 返回顶部 -->
  <div :class="backTopFlag ? 'active' : 'inactive'" @click="backTop">
    <i class="iconfont icon-shangjiantou"></i>
  </div>

  <div style="padding-bottom: 100px"></div>
  <NavButton :active="0" />
</template>

<style scoped lang="scss">
// 搜索轮播模块
.header {
  width: 100%;
  height: auto;
  padding-top: 30px;
  background: url(../../src/assets/img01/home01.webp) no-repeat center center;
  background-size: 100%;
  // 搜索框
  .search_box {
    position: fixed;
    top: 0px;
    left: 50%;
    width: 100%;
    height: 42px;
    transform: translateX(-50%);
    padding: 0 10px;
    z-index: 999;
    transition: all 0.3s;
    &.con {
      background-color: #fff;
    }
    .search {
      margin: 0 10px;
      margin-top: 4px;
      height: 34px;
      line-height: 34px;
      border-radius: 25px;
      background-color: rgba(0, 0, 0, 0.25);
      color: rgba(255, 255, 255, 0.8);
      transition: all 0.3s;
      i {
        color: #fff;
        font-size: 12px;
        margin: 0 6px 0 10px;
      }
      &.con_ser {
        color: #9696a1;
        background-color: #f9f9f9;
        i {
          color: #9696a1;
        }
      }
    }
  }

  // 轮播图
  .focus {
    position: relative;
    padding: 0 14px;
    margin-top: 45px;
    height: auto;
    // background-color: pink;
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
      img {
        width: 100%;
      }
    }
  }
}

// 导航模块
.nav {
  position: relative;

  width: 100%;
  height: auto;
  margin-top: 20px;
  img {
    display: block;
    width: 100%;
  }
  // 创作
  .create {
    position: absolute;
    top: 0;
    width: 100%;
    height: 40%;
    // background-color: pink;
  }
  // 分区
  .subarea {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    top: 40%;
    height: 60%;
    width: 100%;
    // background-color: olivedrab;
    .sub_item {
      width: 30%;
      margin-top: 10px;
      // background-color: skyblue;
      &:nth-child(1) {
        margin-left: 10px;
      }
      &:nth-child(4) {
        margin-left: 10px;
      }
      &:nth-child(3) {
        margin-right: 10px;
      }
      &:nth-child(6) {
        margin-right: 10px;
      }
    }
  }
}

// 最新上线
.new {
  padding: 5px;
  background-color: #fff;
  .new_top {
    img {
      width: 100%;
    }
  }
  .new_con {
    display: flex;
    justify-content: space-between;
    margin: 0 7px;
    padding: 8px;
    padding-bottom: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: rgba(246, 246, 246, 0.9);
    .new_item {
      border-radius: 6px;
      width: 31.5%;
      background-color: #fff;
      img {
        display: block;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
        width: 100%;
      }
      p {
        width: 75%;
        margin: 8px auto;
      }
      .price {
        padding-left: 5px;
        font-size: 14px;
        color: #16162e;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 12px;
        i {
          font-size: 12px;
          font-style: italic;
          font-family: 'Fira Sans Black Italic';
        }
        span {
          font-family: 'Fira Sans Black Italic';
        }
        .zero {
          font-size: 12px;
        }
      }
    }
  }
}

// 商品展示
.shop_show {
  display: flex;
  padding: 0 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 14px;
  justify-content: space-between;
  .shop_item {
    width: 49%;
    border-radius: 3px;
    margin-bottom: 10px;
    background-color: #fff;
    img {
      width: 100%;
    }
    .shop_dec {
      line-height: 18px;
      padding: 8px;
      padding-bottom: 0;
      margin-bottom: 7px;
      img {
        margin-right: 8px;
        display: inline-block;
        width: 40px;
        vertical-align: bottom;
      }
    }
    .price {
      padding-left: 5px;
      font-size: 14px;
      color: #16162e;
      font-style: italic;
      font-weight: 700;
      margin-bottom: 15px;
      i {
        font-size: 12px;
        font-style: italic;
        font-family: 'Fira Sans Black Italic';
      }
      span {
        font-family: 'Fira Sans Black Italic';
      }
      .zero {
        font-size: 12px;
      }
    }
  }
}

// 返回按钮

.active {
  position: fixed;
  right: 20px;
  bottom: 110px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  animation: active 1s;
  -webkit-animation: active 1s;
  overflow: hidden;
  i {
    font-size: 12px;
    color: rgb(197, 197, 203);
  }
}
@keyframes active {
  0% {
    height: 0px;
  }

  100% {
    height: 40px;
  }
}
.inactive {
  position: fixed;
  right: 20px;
  bottom: 110px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  animation: inactive 1s;
  -webkit-animation: inactive 1s;
  animation-fill-mode: forwards;
  overflow: hidden;
  i {
    font-size: 12px;
    color: rgb(197, 197, 203);
  }
}

@keyframes inactive {
  0% {
    height: 40px;
  }

  100% {
    height: 0px;
  }
}
</style>
